<!--
 * @Author: tcosfish
 * @Date: 2022-08-25 15:28:38
 * @LastEditors: tcosfish
 * @LastEditTime: 2022-08-26 17:15:14
 * @FilePath: \ry-frontend\src\App.vue
-->
<script setup lang="ts">
import { reactive, ref } from "vue"
import { RouterView } from "vue-router"
import { ElForm, ElFormItem, ElInput, ElButton } from "element-plus"
import type { FormInstance } from "element-plus"

import Upload from "./components/Upload.vue"
import Download from "./components/Download.vue"

const ruleForm = reactive({
  uid: crypto.randomUUID(),
  filename: "",
})

const baseURL = "http://192.168.10.53:4235"

const ruleFormRef = ref<FormInstance>()
const uploadRef = ref<InstanceType<typeof Upload>>()

const submitForm = () => {
  uploadRef.value?.submitFile()
}
</script>

<template>
  <h2 class="title">月报生成</h2>
  <el-form :model="ruleForm" ref="ruleFormRef" class="my-form">
    <el-form-item label="本次任务的UID" prop="uid">
      <el-input v-model="ruleForm.uid" disabled></el-input>
    </el-form-item>
    <el-form-item label="文件名" prop="filename" required>
      <el-input
        v-model="ruleForm.filename"
        placeholder="请输入将获取的文件名"
      ></el-input>
    </el-form-item>
    <el-form-item label="文件上传" prop="file">
      <Upload
        ref="uploadRef"
        :upload-params="ruleForm"
        class="my-form-upload"
        upload-action="http://192.168.10.53:4235/test/uploads"
      />
    </el-form-item>
    <el-form-item>
      <el-button type="success" @click="submitForm">提交</el-button>
    </el-form-item>
    <el-form-item>
      <Download
        :action="baseURL + '/user/download/'"
        :filename="ruleForm.filename"
      />
    </el-form-item>
  </el-form>

  <div>
    TODO: <br />
    1. 月报生成最少要上传两个文件, 分别是科目余额表.xls和分录.xls <br />
    2. 如果需要更新模板, 请在模板上传中上传 <br />
    3. 目前的文件获取需要指定具体文件名, 考虑让后端把uploads文件内容弄成数组,
    前端接收后以下拉列表形式展现 <br />
    4. UID是留着做文件验证的, 虽然我也不清楚, 后续可能会删除 <br />
    5. 无论是哪个表, 都是默认读取文件中的Sheet1, 而且目前是明确命名
  </div>

  <RouterView />
</template>

<style scoped lang="scss">
.title {
  color: $shallowBlue;
}
.my-form {
  width: 50%;
  &-upload {
    width: 100%;
  }
}
</style>
